<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="static/css/upload.css">
    <script src="static/plugins/jquery-3.1.0.js"></script>
    <script src="static/plugins/layui/layui.js"></script>
    <style>
        .required {
            color: red;
            margin: 0 5px;
        }
    </style>
</head>
<body style="padding: 15px">
<div class="layui-container">
    <form class="layui-form" id="dataForm" lay-filter="dataForm">
        <div class="layui-form-item">
            <label for="carNo" class="layui-form-label"><span class="required">*</span>车牌</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="carNo" id="carNo" placeholder="请输入车牌"
                       lay-verify="required" lay-reqtext="车牌号不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="color" class="layui-form-label"><span class="required">*</span>颜色</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="color" id="color" placeholder="请输入颜色"
                       lay-verify="required" lay-reqtext="颜色不能为空">
            </div>
        </div>
        <div class="layui-form-item">
            <label for="brandId" class="layui-form-label"><span class="required">*</span>品牌</label>
            <div class="layui-input-block">
                <select name="brandId" id="brandId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="categoryId" class="layui-form-label"><span class="required">*</span>分类</label>
            <div class="layui-input-block">
                <select name="categoryId" id="categoryId">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="status" class="layui-form-label"><span class="required">*</span>状态</label>
            <div class="layui-input-block">
                <select name="status" id="status">
                    <option value="1">可用</option>
                    <option value="2">禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="carImages" class="layui-form-label"><span class="required">*</span>车况</label>
            <div class="layui-input-block">
                <input type="hidden" class="layui-input" name="carImages" id="carImages" lay-verify="required"
                       lay-reqtext="请上传车况图">
                <button type="button" class="layui-btn upload-btn" id="upload_btn_carImages">上传图片</button>
                <fieldset class="layui-elem-field upload-field">
                    <legend>图片列表</legend>
                    <div class="layui-field-box img-list" id="upload_list_carImages">

                    </div>
                </fieldset>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="save">提交</button>
            </div>
        </div>
    </form>
</div>
</body>
<script>
    var form;
    var upload;
    let carImageList = [];
    /*判断是否为修改*/
    const dataId = sessionStorage.getItem("dataId") || "";
    $(function () {
        layui.use(function () {
            form = layui.form;
            upload = layui.upload;
            /*获取品牌和分类列表*/
            getBrandList();
            getCategoryList();
            /*获取表单数据*/
            getFormData();
            /*渲染上传组件*/
            initUpload("carImages");
            /*监听表单提交*/
            form.on("submit(save)", function ({field}) {
                $.ajax({
                    url: "car/update",
                    data: {
                        carId: dataId,
                        ...field
                    },
                    method: "post",
                    dataType: "json",
                    success(res) {
                        if (res.code === 200) {
                            parent.layer.msg('操作成功！', {icon: 6}, function () {
                                let index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                                parent.layer.close(index); // 再执行关闭
                                /*刷新list页面的table*/
                                parent.table.reload('dataTable');
                            });
                        } else {
                            layer.alert(res.msg, {icon: 5})
                        }
                    }
                });
                return false;
            });
        })
    })

    function getBrandList() {
        $.ajax({
            url: "brand/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    let $html = '';
                    for (let r of res.data) {
                        $html += '<option value="' + r.id + '">' + r.name + '</option>';
                    }
                    $("#brandId").empty().append($html);
                    /*重新渲染表单中的select标签，不设置的话，下拉框效果无法实现*/
                    form.render('select');
                }
            }
        })
    }

    function getCategoryList() {
        $.ajax({
            url: "category/select",
            method: "get",
            dataType: "json",
            success(res) {
                if (res.code === 200) {
                    let $html = '';
                    for (let r of res.data) {
                        $html += '<option value="' + r.id + '">' + r.name + '</option>';
                    }
                    $("#categoryId").empty().append($html);
                    /*重新渲染表单中的select标签，不设置的话，下拉框效果无法实现*/
                    form.render('select');
                }
            }
        })
    }

    function getFormData() {
        if (dataId) {
            /*获取后立即删除*/
            sessionStorage.removeItem("dataId");
            $.ajax({
                url: "car/info/" + dataId,
                method: "get",
                success(res) {
                    if (res.code === 200) {
                        form.val('dataForm', res.data);
                        carImageList = res.data.carImageList.map(item => item.url);
                        setImg(carImageList, "carImages");
                    }
                }
            })
        }
    }


    function initUpload(id) {
        upload.render({
            elem: "#upload_btn_" + id,
            url: "upload",
            /*设置允许上传的文件类型，默认为image*/
            accept: "image",
            /*设置文件选择时可以看到的文件类型*/
            acceptMime: "image/*",
            /*设置允许上传的文件大小*/
            size: 1024 * 20,
            /*上传时携带的参数*/
            data: {
                type: id
            },
            /*上传成功的回调函数*/
            done(res) {
                if (res.code === 200) {
                    carImageList.push(res.data.filename)
                    setImg(carImageList, id)
                }
            }
        });
    }

    function setImg(carImageList, id) {
        $("#" + id).val(carImageList);
        let $html = '';
        for (let ci of carImageList) {
            $html += '<div class="img-item"><img src="' + ci + '" alt=""><div class="img-opt"><i class="layui-icon layui-icon-eye" title="点击查看详情" onclick="showImg(\'' + ci + '\')"></i><i class="layui-icon layui-icon-delete" title="点击删除图片" onclick="deleteImg(this,\'' + id + '\')"></i></div></div>';
        }
        $("#upload_list_" + id).empty().append($html);
        if (carImageList.length > 0) {
            $("#upload_list_" + id).parents(".upload-field").show();
        } else {
            $("#upload_list_" + id).parents(".upload-field").hide();
        }
    }

    function showImg(imgSrc) {
        parent.layer.open({
            type: 1,
            title: "图片详情",
            area: ["500px", "auto"],
            content: '<a href="' + imgSrc + '" title="点击查看原图" target="_blank"><img style="display: block;max-width: 100%;height: auto;" alt="图片加载异常" src="' + imgSrc + '"></a>'
        });
    }

    function deleteImg(_this, id) {
        parent.layer.confirm('确定删除该图片吗?', {icon: 3, title: "删除图片"}, function (index) {
            let i = $(_this).parents(".img-item").index(".img-item");
            carImageList.splice(i, 1);
            setImg(carImageList, id)
            parent.layer.close(index);
        })
    }

</script>
</html>
